<template>
  <div id="dragCon">
    <div class="project-content">
      <div v-for="pjdt in projectdatas" :key="pjdt.name" class="select-item" draggable="true" @dragstart="drag($event)">{{ pjdt.name }}</div>
    </div>
    <div class="people-content">
      <div v-for="ppdt in peopledata" :key="ppdt.name" class="drag-div" @drop="drop($event)" @dragover="allowDrop($event)">
        <div class="select-project-item">
          <label class="drag-people-label">{{ ppdt.name }}:</label>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dom: null,
      projectdatas: [{
        id: 1,
        name: '葡萄'
      }, {
        id: 2,
        name: '芒果'
      }, {
        id: 3,
        name: '木瓜'
      }, {
        id: 4,
        name: '榴莲'
      }],

      peopledata: [{
        id: 1,
        name: '小颖'
      }, {
        id: 2,
        name: 'hover'
      }, {
        id: 3,
        name: '空巢青年三 '
      }, {
        id: 3,
        name: '一丢丢'
      }]
    }
  },
  watch: {
    projectdatas: {
      handler: function(val, oldval) {

      },
      deep: true
    },
    peopledata: {
      handler: function(val, oldval) {

      },
      deep: true
    }
  },
  methods: {
    drag: function(event) {
      console.log('开始拖拽')
      this.dom = event.currentTarget
    },
    drop: function(event) {
      console.log('放置成功')
      event.preventDefault()
      event.target.appendChild(this.dom)
    },
    allowDrop: function(event) {
      console.log('正处于可放置区间')
      event.preventDefault()
    }
  }
}
</script>
<style>
.select-item {
  background-color: #5bc0de;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  margin-right: 10px;
  cursor:pointer;
  padding: 6px 20px;
  color: #fff;
}
 .cursored{
  cursor: default;
}
.project-content,.people-content {
    margin: 30px 50px;
}
.people-content {
    margin-top: 30px;
}
.drag-div {
    border: 1px solid #5bc0de;
    padding:10px;
    margin-bottom: 10px;
    width: 800px;
    cursor: pointer;
}
.select-project-item {
    display: inline-block;
    text-align: center;
    border-radius: 3px;
}
.drag-people-label{
  margin-bottom:0;
  padding-right:10px;
}
</style>
